<template>
  <div ref="body">
    <!--头部-->
    <div :class="['header', activeMenu == '/home' ? 'fixed-header' : '']">
      <div class="contain">
        <div class="logo-box">
          <img v-lazy="require('@/assets/home/logo.png')" class="logo-img" />
          <div class="logo-content">
            <div class="title">康美心理</div>
            <div class="intro">康富美来—心灵港湾</div>
          </div>
        </div>
        <div class="flex-box">
          <div class="nav">
            <div
              :class="[`nav-item`, activeMenu == menu.path ? 'hover' : '']"
              @click="navChange(menu.path)"
              v-for="menu in menus"
              :key="menu.path"
            >
              {{ menu.name }}
            </div>
          </div>
          <button class="register-btn" @click="gotoLogin">
            免费试用
          </button>
          <button class="login-btn" @click="gotoLogin">登录</button>
        </div>
      </div>
    </div>
    <!--内容-->
    <transition name="rFade">
      <router-view :class="activeMenu == '/home' ? 'padding-top' : ''" />
    </transition>
    <!--右侧浮窗-->
    <div class="contact">
      <el-popover placement="left" width="150" trigger="hover">
        <div class="title">
          <i class="el-icon-phone-outline el-icon"></i>咨询电话
        </div>
        <div class="call-phone">400-6556-376</div>
        <div class="contact-img phone" slot="reference"></div>
      </el-popover>
      <div class="contact-img test" @click="gotoLogin"></div>
      <el-popover placement="left" width="150" trigger="hover">
        <div class="title">
          <i class="el-icon-chat-dot-round el-icon"></i>联系我们
        </div>
        <img
          :src="require('@/assets/home/weixin.png')"
          style="width: 120px; height: 120px"
        />
        <div class="contact-img weChat" slot="reference"></div>
      </el-popover>
      <transition name="top">
        <div class="contact-img goTop" @click="goTop" v-if="showGoTop"></div>
      </transition>
    </div>
    <!--底部-->
    <div class="bottom">
      <div class="bottom-box">
        <div>
          <div class="bottom-img">
            <img v-lazy="require('@/assets/home/bottomLogo.png')" />
          </div>
          <div class="bottom-intro">
            <div>
              公司地址：北京市西城区农业部农研中心3层<br>
              <span style="padding-left:74px">浙江省杭州市未来科技城数字健康产业园10幢A座7层</span>
            </div>
            <div>商务合作：13121396978@163.com</div>
            <div>商务电话：400-6556-376</div>
            <div>
              Copyright © 2022-至今 康美心理 All Rights Reserved.
              <a
                href="https://beian.miit.gov.cn/"
                target="_blank"
                style="text-decoration: none; color: #737377"
                >浙ICP备2022026803号-1</a
              >

            </div>
          </div>
        </div>
        <div class="scan-box">
          <div>
            <div>扫码关注公众号</div>
            <div style="font-weight: bold">“康美心理平台”</div>
          </div>
          <img v-lazy="require('@/assets/home/scan.jpg')" class="scan-img" />
        </div>
      </div>
    </div>


  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      menus: [
        {
          name: "首页",
          path: "/home",
        },
        {
          name: "门诊/心理咨询室",
          path: "/consult",
        },
        {
          name: "校园",
          path: "/school",
        },
        {
          name: "企业",
          path: "/company",
        },
        {
          name: "机关事业",
          path: "/government",
        },
       
        {
          name: "咨询机构",
          path: "/org",
        },
        {

        }
      ],
      showGoTop: false,
    };
  },
  computed: {
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    //前往登录
    gotoLogin() {
      this.$router.push("/login");
    },
    //路由切换
    navChange(path) {
      this.$router.replace(path);
    },
    //回到顶部
    goTop() {
      this.$nextTick(() => {
        this.$refs["body"].scrollIntoView({
          block: "start",
          behavior: "smooth",
        });
      });
    },
    //判断是否显示回到顶部
    handleScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      this.showGoTop = scrollTop >= 600 ? true : false;
    },
  },

};
</script>
<style scoped lang="scss">
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .contain {
    min-width: $width;
    max-width: $width;
  }
}

.padding-top {
  padding-top: 80px;
}

.header {
  width: 100%;
  height: 80px;
  @include flex($justify: center);
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .contain {
    width: $width;
    height: 100%;
    @include flex($justify: space-between);
    .logo-box {
      @include flex;
      .logo-img {
        width: 54px;
        height: 54px;
      }
      .logo-content {
        margin-left: 10px;
        .title {
          font-size: 24px;
          color: $title-color;
          font-weight: bold;
          line-height: 33px;
        }
        .intro {
          font-size: 14px;
          color: $intro-color;
          line-height: 20px;
        }
      }
    }

    .nav {
      @include flex;
      margin-left: 120px;
      height: 80px;
      .nav-item {
        position: relative;
        height: 80px;
        line-height: 80px;
        font-size: 16px;
        color: $title-color;
        padding-bottom: 5px;
      }
      .nav-item {
        margin-right: 30px;
      }
      .nav-item::after {
        position: absolute;
        content: "";
        bottom: 1px;
        left: 50%;
        width: 0;
        height: 3px;
        border-radius: 30px;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: $color;
        -webkit-transition: all 0.25s ease-in-out;
        -o-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
      }
      .nav-item:hover::after {
        width: 100%;
      }
      .nav-item:hover,
      .nav-item.hover {
        color: $color;
      }
    }

    .login-btn {
      width: 80px;
      line-height: 36px;
      height: 36px;
      border: 1px solid $color;
      border-radius: 50px;
      text-align: center;
      color: $color;
      background: #fff;
    }

    .login-btn:hover {
      background: $color;
      color: #fff;
    }

    .register-btn {
      width: 120px;
      height: 36px;
      line-height: 36px;
      background: rgba(250, 196, 111, 0.7);
      border-radius: 20px;
      color: $title-color;
      font-weight: 500;
      text-align: center;
      margin-right: 15px;
    }

    .register-btn:hover {
      background: $color2;
    }
  }
}

.bottom {
  width: 100%;
  box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.1);
  margin-top: 80px;
  @include flex($justify: center);
  .bottom-box {
    width: $width;
    padding: 40px 0;
    @include flex($justify: space-between);

    .bottom-img {
      display: flex;
      width: 475px;
      height: 40px;
      margin-bottom: 20px;
      img {
        height: 100%;
        background: url(../../assets/home/bottomLogo.png) no-repeat;
      }
    }

    .bottom-intro {
      font-size: 15px;
      color: $intro-color;
      line-height: 24px;
    }
  }

  .scan-box {
    @include flex;
    color: $title-color;
    line-height: 24px;
    .scan-img {
      width: 140px;
      height: 140px;
      margin-left: 60px;
    }
  }
}

.contact {
  height: 288px;
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 9999;

  .contact-img {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    border-radius: 4px;
    margin-bottom: 2px;
  }

  .phone {
    background-image: url("../../assets/home/phone.png");
  }

  .test {
    background-image: url("../../assets/home/test.png");
  }

  .weChat {
    background-image: url("../../assets/home/contact.png");
  }

  .goTop {
    background-image: url("../../assets/home/goTop.png");
  }
}

.el-popper {
  .el-icon {
    font-size: 18px;
    margin-right: 4px;
  }
  .title {
    font-size: 15px;
    color: $title-color;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .call-phone {
    font-size: 15px;
    line-height: 24px;
    color: $color;
  }
}
</style>
